<template>
  <div class="checkstand">
    <div class="checkstand_content">
      <!-- 订单地址 -->
      <div class="checkstand_left">
        <div class="title">订单地址</div>
        <div class="cont">
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="收货人姓名" prop="name">
              <el-input
                v-model="form.name"
                placeholder="请填写收件人名字(必填)"
              ></el-input>
            </el-form-item>
            <el-form-item label="收货人电话" prop="phone">
              <el-input
                v-model="form.phone"
                placeholder="请填写收件人联系电话(必填)"
              ></el-input>
            </el-form-item>
            <el-form-item label="收货地址" prop="address">
              <el-cascader
                size="large"
                :options="options"
                v-model="selectedOptions"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="省份" prop="province">
              <el-input
                v-model="form.province"
                placeholder="可以从地区选择器选择(必填)"
              ></el-input>
            </el-form-item>
            <el-form-item label="市级" prop="city">
              <el-input
                v-model="form.city"
                placeholder="可以从地区选择器选择(必填)"
              ></el-input>
            </el-form-item>
            <el-form-item label="区/县" prop="region">
              <el-input
                v-model="form.region"
                placeholder="可以从地区选择器选择(必填)"
              ></el-input>
            </el-form-item>
            <el-form-item label="详情地址" prop="detail">
              <el-input
                v-model="form.detail"
                placeholder="请填写收货详情地址(必填)"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮政编码" prop="postcode">
              <el-input
                v-model="form.postcode"
                placeholder="请填写收货邮政编码(必填)"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单备注" prop="note">
              <el-input
                type="textarea"
                v-model="note"
                placeholder="填写订单备注；如中中通快递，百世快递等"
              ></el-input>
            </el-form-item>
            <el-form-item label="设默认地址" v-if="isaddress">
              <el-button
                type="primary"
                plain
                :disabled="!issubmit"
                @click="addaddress('form')"
                >设为默认地址</el-button
              >
            </el-form-item>
            <el-form-item label="更新默认地址" v-if="!isaddress">
              <el-button type="primary" plain @click="updateaddress()"
                >更新默认地址</el-button
              >
            </el-form-item>
            <el-form-item label="其他地址地址">
              <el-button type="primary" plain @click="drawer = true"
                >选择其他地址</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 抽屉 -->
      <el-drawer
        title="选择收货地址"
        :visible.sync="drawer"
        :direction="direction"
      >
        <template v-if="alladdress.length">
          <div
            class="add"
            v-for="e in alladdress"
            :key="e.id"
            @click="otheraddress(e.id)"
          >
            <div class="add1">
              <p>{{ e.name }}</p>
              <p>{{ e.phone }}</p>
            </div>
            <div class="add2">
              <p>{{ e.province }}</p>
              ☛
              <p>{{ e.city }}</p>
              ☛
              <p>{{ e.region }}</p>
              ☛
              <p>{{ e.detail }}</p>
            </div>
          </div>
        </template>
        <div class="carnull" v-else>
          <span>暂无地址,请先添加...</span>
        </div>
      </el-drawer>
      <!-- 商品详情 -->
      <div class="checkstand_right">
        <div class="title">订单详情</div>
        <div class="order">
          <div class="orderlm">
            <div class="order_title">
              <div class="item">商品</div>
              <div class="item">合计</div>
            </div>
            <div
              class="order_title1"
              v-for="item in orderData"
              :key="item.index"
            >
              <div class="item1">
                <img :src="api + item.bookimage" alt="" />
              </div>
              <div class="item2">
                {{ item.bookname }} <span>x{{ item.number }}</span>
              </div>
              <div class="item3">￥{{ item.number * item.price }}</div>
            </div>
            <div class="order_title">
              <div class="item">运费</div>
              <div class="item">免费送货</div>
            </div>
            <div class="order_title">
              <div class="item">订单总计</div>
              <div class="item">￥{{ sum }}</div>
            </div>
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane label="测试支付" name="1">
                <div class="pay"><span>这是测试支付</span></div>
                <div class="paybut">
                  <el-button type="primary" plain @click="testpay()"
                    >去测试支付</el-button
                  >
                </div>
              </el-tab-pane>
              <el-tab-pane label="微信支付" name="2">
                <div class="pay">
                  <span>用微信扫一扫支付，当我们收到货款就会安排发货</span>
                </div>
                <div class="paybut">
                  <el-button type="primary" plain @click="wechatpay()"
                    >去微信支付</el-button
                  >
                </div>
              </el-tab-pane>
              <el-tab-pane label="支付宝支付" name="3">
                <div class="pay">
                  <span>用支付宝扫一扫支付，当我们收到货款就会安排发货</span>
                </div>
                <div class="paybut">
                  <el-button type="primary" plain @click="alipay()"
                    >去支付宝支付</el-button
                  >
                </div>
              </el-tab-pane>
              <el-tab-pane label="线下支付" name="4">
                <div class="pay">
                  <span
                    >线下支付，你可以通过向我们的账户支付，当我们收到货款就会安排发货</span
                  >
                </div>
                <div class="paybut">
                  <el-button type="primary" plain @click="offlinepay()"
                    >去支付</el-button
                  >
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <el-dialog
          title="这是测试支付"
          :visible.sync="centerDialogVisible"
          width="30%"
          center
        >
          <div class="paycode"></div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancelpay">取消支付</el-button>
            <el-button type="primary" @click="completepay">完成支付</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { regionDataPlus, CodeToText } from "element-china-area-data";
export default {
  data() {
    return {
      options: regionDataPlus,
      selectedOptions: [],
      orderData: [],
      default: [],
      alladdress: [],
      isaddress: true,
      issubmit: true,
      drawer: false,
      centerDialogVisible: false,
      activeName: "1",
      direction: "rtl",
      api: this.imageapi,
      user_id: sessionStorage.getItem("id"),
      nickname: sessionStorage.getItem("nickname"),
      note: "", //订单备注
      form: {
        name: "",
        phone: "",
        province: "",
        city: "",
        region: "",
        detail: "",
        postcode: "",
        id: "",
        orders_id: "" //生成的订单id
      },
      rules: {
        name: [
          { required: true, message: "请输入收货人姓名", trigger: "blur" }
        ],
        province: [
          { required: true, message: "请输入收货人省份", trigger: "change" }
        ],
        city: [
          { required: true, message: "请输入收货人城市", trigger: "change" }
        ],
        region: [
          { required: true, message: "请输入收货人地区", trigger: "change" }
        ],
        detail: [
          { required: true, message: "请输入收货人详细地址", trigger: "blur" }
        ],
        postcode: [
          {
            required: true,
            message: "请输入收货人地区邮政编码",
            trigger: "blur"
          }
        ],
        phone: [
          { required: true, message: "请输入收货人电话", trigger: "blur" }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }]
      }
    };
  },
  computed: {
    //计算并获取总价
    sum() {
      let total = 0;
      for (let i = 0; i < this.orderData.length; i++) {
        let item = this.orderData[i];
        total += item.price * item.number;
      }
      return total.toString().replace(/\B(?=(\d{3})+$)/g, ",");
    }
  },
  mounted() {
    this.orderData = JSON.parse(this.$route.query.data); //把购物车选中的商品带到收银台展示
    this.init();
    this.alladdressinit();
  },
  methods: {
    // 解析地区状态码为汉字地名
    handleChange(arr) {
      this.form.province = CodeToText[arr[0]];
      this.form.city = CodeToText[arr[1]];
      this.form.region = CodeToText[arr[2]];
    },
    // 获取默认地址
    init() {
      const id = this.user_id;
      this.$http.post("/getdefaultaddress", { id }).then(res => {
        // console.log(res);
        if (res.data != null) {
          this.form = res.data;
          this.isaddress = false;
        }
      });
    },
    // 获取所有地址
    alladdressinit() {
      const id = this.user_id;
      this.$http.post("/getalladdress", { id }).then(res => {
        // console.log(res);
        if (res.status == 200) {
          this.alladdress = res.data;
        }
      });
    },
    // 设为默认地址
    addaddress(form) {
      this.$refs[form].validate(valid => {
        // console.log(valid)
        if (valid) {
          const data = {};
          data.user_id = this.user_id;
          data.name = this.form.name;
          data.phone = this.form.phone;
          data.province = this.form.province;
          data.city = this.form.city;
          data.region = this.form.region;
          data.detail = this.form.detail;
          data.postcode = this.form.postcode;
          console.log(data);
          this.$http.post("/addaddress", data).then(() => {
            // console.log(res);
            this.$message({
              showClose: true,
              message: "默认地址设置成功...",
              type: "success"
            });
          });
          this.issubmit = false;
        } else {
          this.$message({
            message: "请完收货地址信息...",
            type: "error"
          });
        }
      });
    },
    // 更新默认地址
    updateaddress() {
      const data = {};
      data.id = this.form.id;
      data.user_id = this.user_id;
      data.name = this.form.name;
      data.phone = this.form.phone;
      data.province = this.form.province;
      data.city = this.form.city;
      data.region = this.form.region;
      data.detail = this.form.detail;
      data.postcode = this.form.postcode;
      console.log(data);
      this.$http.post("/updatedefaultaddress", data).then(() => {
        // console.log(res);
        this.$message({
          showClose: true,
          message: "更新默认地址成功...",
          type: "success"
        });
      });
    },
    // 获取全部地址中的某个地址的全部信息
    otheraddress(id) {
      console.log(id);
      this.$http.post("/otheraddress", { id }).then(res => {
        // console.log(res);
        this.form = res.data;
        this.drawer = false;
      });
    },
    //测试支付 生成订单
    testpay() {
      if (this.form == null) {
        this.$message({
          message: "请完收货地址信息...",
          type: "error"
        });
      } else {
        this.$http
          .post("/ordertestpay", {
            order: this.orderData,
            address: this.form,
            note: this.note,
            nickname: this.nickname
          })
          .then(res => {
            // console.log(res);
            this.orders_id = res.data;
            // console.log(this.orders_id);
            this.centerDialogVisible = true;
          });
      }
    },
    //完成测试支付 已付款
    completepay() {
      const orders_id = this.orders_id;
      console.log(orders_id);
      this.$http.post("/ordertestpayment", { orders_id }).then(() => {
        // console.log(res);
        this.$message({
          showClose: true,
          message: "恭喜你，完成支付！",
          type: "success"
        });
        this.centerDialogVisible = false;
        this.$router.push({ name: "index" });
      });
    },
    //取消支付
    cancelpay() {
      this.centerDialogVisible = false;
      this.$message({
        type: "warning",
        message: "已取消支付，可以前往个人中心完成支付！"
      });
      this.$router.push({ name: "index" });
    },
    //微信支付
    wechatpay() {},
    //支付宝支付
    alipay() {},
    //线下支付
    offlinepay() {}
  }
};
</script>

<style scoped>
.checkstand {
  width: 100%;
}
.checkstand_content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 1200px;
  margin: 10px auto;
}
.checkstand_left {
  width: 600px;
}
.title {
  font-size: 22px;
  font-weight: bold;
  color: #000;
  text-align: center;
  margin: 20px auto;
}
.order {
  width: 580px;
  border: 3px solid #cfc8c8;
}
.orderlm {
  width: 550px;
  margin: 0 auto;
}
.order_title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 2px solid #eee;
}
.order_title1 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 70px;
  line-height: 70px;
  border-bottom: 2px dashed #eee;
}
.order_title .item {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: #555;
}
.item1 img {
  width: 60px;
  height: 60px;
  margin-top: 5px;
}
.item2 {
  flex: 1;
  font-size: 15px;
  margin-left: 10px;
}
.item3 {
  font-size: 15px;
  color: #777;
}
.item2 span {
  font-size: 14px;
  color: #777;
  margin-left: 5px;
}
.el-collapse-item /deep/ .el-collapse-item__header {
  font-size: 13px;
  font-weight: bold;
}
.add {
  width: 96%;
  margin: 2%;
  border-bottom: 2px solid #999;
  padding: 5px 0;
}
.add:hover,
.add:active {
  cursor: pointer;
  background: #eee;
}
.add .add1 p {
  display: inline;
}
.add .add1 p:nth-child(1) {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.add .add1 p:nth-child(2) {
  font-size: 17px;
  color: #777;
}
.add .add2 p {
  display: inline;
  font-size: 16px;
  color: #555;
}
.el-tabs {
  margin: 10px 0;
}
.pay {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 16px;
  color: #555;
}
.paybut {
  text-align: center;
  margin-bottom: 20px;
}
.paycode {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background: #eee;
}
.carnull span {
  display: block;
  margin: 50px auto;
  text-align: center;
  font-size: 18px;
}
</style>